<template>
  <div class="container dashboard-container">
    <div class="dashboard-header">
      <h2 class="text-center">控制台</h2>
    </div>
    
    <div class="dashboard-stats">
      <div class="stat-card">
        <div class="stat-label">用户</div>
        <div class="stat-number">{{ userCount }}</div>
      </div>
      
      <div class="stat-card">
        <div class="stat-label">文章</div>
        <div class="stat-number">{{ postCount }}</div>
      </div>
      
      <div class="stat-card">
        <div class="stat-label">分类</div>
        <div class="stat-number">{{ categoryCount }}</div>
      </div>
      
      <div class="stat-card">
        <div class="stat-label">评论</div>
        <div class="stat-number">{{ commentCount }}</div>
      </div>
    </div>
    
    <div class="dashboard-content">
      <div class="recent-section container">
        <h3>最新文章</h3>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else>
          <div class="post-item" v-for="post in recentPosts" :key="post.id">
            <h4 class="post-title">{{ post.title }}</h4>
            <div class="post-meta">
              作者: {{ post.author }} | {{ formatRelativeTime(post.createdAt) }}
            </div>
            <div class="post-excerpt">{{ truncateText(post.content, 100) }}</div>
          </div>
          <div v-if="recentPosts.length === 0">暂无文章</div>
        </div>
      </div>
      
      <div class="recent-section container">
        <h3>最新评论</h3>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else>
          <div class="comment-item" v-for="comment in recentComments" :key="comment.id">
            <div class="comment-content">{{ truncateText(comment.content, 100) }}</div>
            <div class="comment-meta">
              <span>作者: {{ comment.author }}</span>
              <span>{{ formatRelativeTime(comment.createdAt) }}</span>
            </div>
          </div>
          <div v-if="recentComments.length === 0">暂无评论</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatRelativeTime, truncateText } from '../modules/utils.js';

export default {
  props: ['appModule'],
  data() {
    return {
      loading: false
    };
  },
  computed: {
    userCount() {
      return this.appModule && this.appModule.userModule && this.appModule.userModule.users ? 
        this.appModule.userModule.users.length : 0;
    },
    postCount() {
      return this.appModule && this.appModule.postModule && this.appModule.postModule.posts ? 
        this.appModule.postModule.posts.length : 0;
    },
    categoryCount() {
      return this.appModule && this.appModule.categoryModule && this.appModule.categoryModule.categories ? 
        this.appModule.categoryModule.categories.length : 0;
    },
    commentCount() {
      return this.appModule && this.appModule.commentModule && this.appModule.commentModule.comments ? 
        this.appModule.commentModule.comments.length : 0;
    },
    recentPosts() {
      return this.appModule ? this.appModule.getRecentPosts(5) : [];
    },
    recentComments() {
      return this.appModule ? this.appModule.getRecentComments(5) : [];
    }
  },
  methods: {
    formatRelativeTime,
    truncateText
  }
};
</script>